<template>
	<view class="prescription-info">
		<view v-for="(item,index) in listData" :key="index" class="card">
			<view class="main flexR">
				<view class="left">
					<view class="row" v-for="cItem in cardLabel" :key='cItem.fKey'>
					<text>{{cItem.label}}</text>{{item[cItem.key]||''}} {{cItem.unit||''}} </view>
				</view>
				<view class="right" @click="toPage(item)">
					<u-icon name="arrow-right" color="#B5B5B5"></u-icon>
				</view>
			</view>
			<view class="div-cut"></view>
		</view>
		<view class="prescription-info-position flexR">
			<view class="totle-money">
				金额：<text>{{totleMoney}}</text>元
			</view>
			<view class="prescription-info-position-pay" @click="toPayPage"> 去缴费 </view>
		</view>
		<Load :load="load"></Load>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import Load from '@/components/Load/index.vue'
	import { getPrescription } from '@/api/home.js'
	export default {
		components: { Load },
		data() {
			return {
				listData:[{}],
				cardLabel:[
					{
						label:'挂号科室：',
						key:'kfks',
						fKey:'label11'
					},
					{
						label:'挂号序号：',
						key:'ghxh',
						fKey:'label21'
					},
					{
						label:'处方序号：',
						key:'cfxh',
						fKey:'label31'
					},
					{
						label:'执行科室：',
						key:'zxksmc',
						fKey:'label4'
					},
					{
						label:'科室地址：',
						key:'zxksdz',
						fKey:'label6'
					},
					{
						label:'应付金额：',
						key:'cfje',
						fKey:'label5',
						unit:'元'
					}
				],
				load:false,
				query:{
					serialNumber:'',
					settlementMark:'0'
				},
				totleMoney:0,
				cfxhhj:''
			}
		},
		computed:{
			...mapGetters(['userInfo'])
		},
		async onLoad(op) {
			if(op){
				this.query = {
					...op
				}
			}
			await this.$onLaunched
			// this.initData()
		},
		methods: {
			toPage(val){
				uni.navigateTo({
					url:'/pages/Service/OutpatientServe/detail?cfxh=' + val.cfxh
				})
			},
			toPayPage(){
				let params = {
					ksmc: this.listData[0].kfks,
					ysxm:this.listData[0].kfys,
					ghxh:this.listData[0].ghxh,
					cfxhhj:this.cfxhhj
				}
				params = JSON.stringify(params)
				if(this.listData[0]){
					uni.navigateTo({
						url:`/pages/Pay/prescriptionPay?params=${params}`
					})
				}
			},
			initData(){
				this.load = true
				let params = {
					...this.query,
					patid: this.userInfo.patId
				}
				getPrescription(params).then(data => {
					this.load = false
					let res = data||''
					if(res){
						this.listData = res.prescriptionList||[]
						this.totleMoney = res.totalAmount
						this.cfxhhj = res.cfxhhj
					}else{
						this.listData = []
						this.totleMoney = 0
					}
				}).catch(e => {
					this.listData = []
					this.totleMoney = 0
					this.load = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.prescription-info{
		height: calc(100vh - 110rpx);
		margin-bottom: 110rpx;
		overflow: scroll;
		background-color: $uni-bg-color;
		position: relative;
		&-position{
			box-shadow: 0 -8rpx 8rpx rgba($color: #000000, $alpha: 0.12);
			width: calc(100vw);
			position: fixed;
			bottom: 0;
			left: 0;
			height: 110rpx;
			line-height: 110rpx;
			font-size: 36rpx;
			z-index: 2;
			&-pay{
				background-color: $theme-color-light;
				color: #FFFFFF;
				width: 340rpx;
				text-align: center;
			}
			>.totle-money{
				background-color: #FFFFFF;
				flex: 1;
				padding-left: 40rpx;
				>text{
					color: $orage-color;
				}
			}
		}
	}
</style>